<template>
  <el-card
      :style="cardStyle"
      body-style="padding: 10px"
      class="stat-card"
      shadow="hover"
      @click="handleClick"
  >
    <div class="card-content">
      <div :style="iconContainerStyle" class="icon-container">
        <el-icon :size="32" :style="iconStyle">
          <component :is="resolveIcon"></component>
        </el-icon>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ value }}</div>
        <div class="stat-label">{{ label }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {computed} from 'vue'
import * as ElementPlusIcons from '@element-plus/icons-vue'

const props = defineProps({
  // 卡片标签
  label: {
    type: String,
    required: true
  },
  // 卡片数值
  value: {
    type: [Number, String],
    required: true
  },
  // 图标名称或组件
  icon: {
    type: [String, Object],
  },
  // 卡片颜色（可选）
  color: {
    type: String,
    default: '#409EFF' // Element Plus 默认主色
  },
  // 是否使用预设的主题颜色（primary, success, warning, danger, info）
  theme: {
    type: String,
    default: '',
    validator: (value) => {
      return ['', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
    }
  }
})

const emit = defineEmits(['click'])

// 处理点击事件
const handleClick = () => {
  emit('click', {label: props.label, value: props.value})
}

// 解析主题颜色
const themeColor = computed(() => {
  if (!props.theme) return props.color

  const themeMap = {
    primary: 'var(--el-color-primary)',
    success: 'var(--el-color-success)',
    warning: 'var(--el-color-warning)',
    danger: 'var(--el-color-danger)',
    info: 'var(--el-color-info)'
  }
  return themeMap[props.theme]
})

// 解析图标
const resolveIcon = computed(() => {
  // 如果是组件对象，直接返回
  if (typeof props.icon === 'object') {
    return props.icon
  }

  // 如果是字符串，尝试从Element Plus图标库中获取
  if (typeof props.icon === 'string') {
    // 检查是否是Element Plus图标名称
    const iconName = props.icon.charAt(0).toUpperCase() + props.icon.slice(1)
    if (ElementPlusIcons[iconName]) {
      return ElementPlusIcons[iconName]
    }
  }

  // 默认返回信息图标
  return ElementPlusIcons.InfoFilled
})

// 卡片样式
const cardStyle = computed(() => ({
  borderTop: `3px solid ${themeColor.value}`
}))

// 图标容器样式
const iconContainerStyle = computed(() => ({
  backgroundColor: `${themeColor.value}1A` // 10% 透明度
}))

// 图标样式
const iconStyle = computed(() => ({
  color: themeColor.value
}))
</script>

<style scoped>
.stat-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-top: 5px;
}
</style>